import React, { Component } from "react";
import {
  Card,
  Icon,
  Menu,
  Dropdown,
  Button,
  message,
  Input,
  Table,
  Tree,
  Modal,
} from "antd";
import "./index.less";
import * as echarts from "echarts";
import Addzican from "./addzican";
// const { confirm } = Modal;
const { TreeNode } = Tree;
// function showConfirm() {
//   confirm({
//     content: "确定要删除吗",
//     onOk() {
//       return new Promise((resolve, reject) => {
//         setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
//       }).catch(() => console.log("Oops errors!"));
//     },
//     onCancel() {},
//   });
// }

function handleMenuClick(e) {
  message.info("Click on menu item.");
  console.log("click", e);
}
const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">服务器</Menu.Item>
    <Menu.Item key="2">资产重要性</Menu.Item>
    <Menu.Item key="3">3</Menu.Item>
  </Menu>
);
const tabListNoTitle = [
  {
    key: "资产总览",
    tab: "资产总览",
  },
  {
    key: "设备管理",
    tab: "设备管理",
  },
  {
    key: "拓扑",
    tab: "拓扑",
  },
];
//表单
const columns = [
  {
    title: "系统类型",
    dataIndex: "name",
    key: "name",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "厂商",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "设备数量",
    dataIndex: "type",
    key: "type",
    // align: "center",
  },
  {
    title: "漏洞信息",
    dataIndex: "address",
    key: "address",
    render: (text, record, index) => (
      <span>
        <Button>查看</Button>
      </span>
    ),
  },

  // {
  //   title: "操作",
  //   key: "action",
  //   render: (text, record, index) => (
  //     <span>
  //       <Button>查看</Button>
  //       <Button type="primary">修改</Button>
  //       <Button type="danger" onClick={() => showConfirm(index)}>
  //         删除
  //       </Button>
  //     </span>
  //   ),
  // },
];

const data = [
  {
    key: "1",
    name: "Cloudview",
    age: "中科曙光",
    address: "无风险",
    type: "1",
  },
];

class assetsmanagement extends Component {
  state = {
    key: "tab1",
    noTitleKey: "资产总览",
    isShowAdd: false,
    visible: false,
    show: false,
  };
  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  };
  onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    console.log("onCheck", checkedKeys, info);
  };
  handleOk = (e) => {
    console.log(e);
    this.setState({
      isShowAdd: false,
    });
  };
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      isShowAdd: false,
    });
  };

  option1 = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: "资产分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          type: "pie",
          radius: "50%",
          data: [
            { value: 580, name: "服务器", itemStyle: { color: "#5470c6" } },
            { value: 484, name: "网络设备", itemStyle: { color: "#91cc75" } },
            {
              value: 300,
              name: "数据存储设备",
              itemStyle: { color: "#fac858" },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option2 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "资产安全状态分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "客户端",
          type: "pie",
          radius: "50%",
          data: [
            { value: 400, name: "存在风险", itemStyle: { color: "#73c0de" } },
            { value: 100, name: "保护中", itemStyle: { color: "#fac858" } },
            { value: 50, name: "未受保护", itemStyle: { color: "#91cc75" } },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option3 = () => {
    var chartDom = document.getElementsByClassName("main")[2];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "服务器风险分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      graphic: {
        type: "text",
        left: "center",
        top: "40%",
        style: {
          text: "170",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
          fontWeight: 700,
        },
      },
      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "状态分布",
        left: "center",
        top: "50%",
        textStyle: {
          text: "107",
          textAlign: "center",
          fill: "#333",
          fontSize: 16,
          fontWeight: 600,
        },
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            { value: 79, name: "存在风险", itemStyle: { color: "#91cc75" } },
            { value: 83, name: "保护中", itemStyle: { color: "#5470c6" } },
            { value: 8, name: "未受保护", itemStyle: { color: "#fc8452" } },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option4 = () => {
    var chartDom = document.getElementsByClassName("main")[3];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "客户端状态分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      graphic: {
        type: "text",
        left: "center",
        top: "40%",
        style: {
          text: "91",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
          fontWeight: 700,
        },
      },
      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "状态分布",
        left: "center",
        top: "50%",
        textStyle: {
          text: "107",
          textAlign: "center",
          fill: "#333",
          fontSize: 16,
          fontWeight: 600,
        },
      },

      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          avoidLabelOverlap: false,
          data: [
            { value: 8, name: "离线", itemStyle: { color: "#5470c6" } },
            { value: 83, name: "正常", itemStyle: { color: "#91cc75" } },
            { value: 8, name: "服务器关机", itemStyle: { color: "#fac858" } },
            { value: 8, name: "暂停", itemStyle: { color: "#ee6666" } },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option5 = () => {
    var chartDom = document.getElementsByClassName("main")[4];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },
      graphic: {
        type: "text",
        left: "center",
        top: "40%",
        style: {
          text: "91",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
          fontWeight: 700,
        },
      },
      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "服务器总数量",
        left: "center",
        top: "50%",
        textStyle: {
          text: "91",
          textAlign: "center",
          fill: "#333",
          fontSize: 16,
          fontWeight: 600,
        },
      },

      legend: {
        orient: "vertical",
        left: "left",
      },

      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            {
              value: 50,
              name: "华东1（杭州）",
              itemStyle: { color: "#5470c6" },
            },
            {
              value: 15,
              name: "华北1（青岛）",
              itemStyle: { color: "#91cc75" },
            },
            {
              value: 10,
              name: "华北2（北京）",
              itemStyle: { color: "#9a60b4" },
            },
            {
              value: 8,
              name: "华东2（上海）",
              itemStyle: { color: "#73c0de" },
            },
            {
              value: 8,
              name: "其他",
              itemStyle: { color: "#ee6666" },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option6 = () => {
    var chartDom = document.getElementsByClassName("main")[5];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },

      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "操作系统",
        left: "center",
        top: "50%",
        textStyle: {
          text: "91",
          textAlign: "center",
          fill: "#333",
          fontSize: 16,
          fontWeight: 600,
        },
      },

      legend: {
        orient: "vertical",
        left: "left",
      },

      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            {
              value: 50,
              name: "WinCE",
              itemStyle: { color: "#6495ED" },
            },
            {
              value: 15,
              name: "FreeRTOS",
              itemStyle: { color: "#EE82EE" },
            },
            {
              value: 10,
              name: "VxWorks",
              itemStyle: { color: "#00FFFF" },
            },
            {
              value: 8,
              name: "windows",
              itemStyle: { color: "#9400D3" },
            },
            {
              value: 8,
              name: "CentOs",
              itemStyle: { color: "#7FFFAA" },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option7 = () => {
    var chartDom = document.getElementsByClassName("main")[6];
    var myChart = echarts.init(chartDom, null, {
      width: 600,
      height: 300,
    });
    myChart.resize({
      width: 600,
      height: 300,
    });
    var option;
    option = {
      tooltip: {},
      legend: {},
      grid: {
        top: "5%",
        left: "20%",
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        data: ["102", "502", "771", "789", "1200"],
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        offset: 10,
        nameTextStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            left: "",
            position: "right",
          },
          data: [
            { name: "192.168.06.01", value: 20 },
            { name: "192.168.06.02", value: 33 },
            { name: "192.168.06.03", value: 45 },
            { name: "192.168.06.04", value: 71 },
            { name: "192.168.06.05", value: 94 },
          ],
          itemStyle: {
            color: "#00bfff",
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };
  option8 = () => {
    var chartDom = document.getElementsByClassName("main")[7];
    var myChart = echarts.init(chartDom, null, {
      width: 600,
      height: 300,
    });
    myChart.resize({
      width: 600,
      height: 300,
    });
    var option = {
      tooltip: {},
      legend: {},
      grid: {
        top: "5%",
        left: "20%",
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        data: ["ifix", "Citech", "MCGS", "PCHMI", "WinCC"],
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        offset: 10,
        nameTextStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            left: "",
            position: "right",
          },
          data: [
            { name: "192.168.06.01", value: 26 },
            { name: "192.168.06.02", value: 53 },
            { name: "192.168.06.03", value: 64 },
            { name: "192.168.06.04", value: 78 },
            { name: "192.168.06.05", value: 78 },
          ],
          itemStyle: {
            color: "#00bfff",
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option9 = () => {
    var chartDom = document.getElementsByClassName("main")[8];
    var myChart = echarts.init(chartDom, null, {
      width: 600,
      height: 300,
    });
    myChart.resize({
      width: 600,
      height: 300,
    });
    var option;
    option = {
      tooltip: {},
      legend: {},
      grid: {
        top: "5%",
        left: "20%",
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        data: ["CWE-20", "CWE-20", "CWE-119", "CWE-189", "CWE-287"],
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        offset: 10,
        nameTextStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            left: "",
            position: "right",
          },
          data: [
            { name: "192.168.06.01", value: 33 },
            { name: "192.168.06.02", value: 42 },
            { name: "192.168.06.03", value: 57 },
            { name: "192.168.06.04", value: 68 },
            { name: "192.168.06.05", value: 97 },
          ],
          itemStyle: {
            color: "#00bfff",
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  option10 = () => {
    var chartDom = document.getElementsByClassName("main")[9];
    var myChart = echarts.init(chartDom, null, {
      width: 600,
      height: 300,
    });
    myChart.resize({
      width: 600,
      height: 300,
    });
    var option;
    option = {
      tooltip: {},
      legend: {},
      grid: {
        top: "5%",
        left: "20%",
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        data: [
          "Eclipse BaSys",
          "KepOPC",
          "LECPSever",
          "MX Component",
          "QT-OPC",
        ],
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        offset: 10,
        nameTextStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            left: "",
            position: "right",
          },
          data: [
            { name: "192.168.06.01", value: 14 },
            { name: "192.168.06.02", value: 45 },
            { name: "192.168.06.03", value: 68 },
            { name: "192.168.06.04", value: 78 },
            { name: "192.168.06.05", value: 96 },
          ],
          itemStyle: {
            color: "#00bfff",
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  componentDidMount() {
    this.option1();
    this.option2();
    this.option3();
    this.option4();
    this.option5();
    this.option6();
    this.option7();
    this.option8();
    this.option9();
    this.option10();
    // this.option11();
  }

  render() {
    const contentListNoTitle = {
      资产总览: (
        <div className="zijinzonglan">
          <Card title="保有资产分析">
            <div style={{ display: "flex", justifyContent: "space-around" }}>
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
            </div>
          </Card>

          <Card title="服务器管理">
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                flexWrap: "wrap",
              }}
            >
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
              <Card className="main" style={{ width: 550, height: 300 }}></Card>
            </div>
          </Card>
          <div
            className="Card-Card"
            style={{
              display: "flex",
              justifyContent: "space-around",
              flexWrap: "wrap",
            }}
          >
            <Card title="端口开放Top5">
              <div className="main zhu"></div>
            </Card>
            <Card title="软件资产Top5">
              <div className="main zhu"></div>
            </Card>
            <Card title="漏洞Top5">
              <div className="main zhu"></div>
            </Card>
            {/* <Card title="相同账户Top5">
              <div className="main zhu"></div>
            </Card> */}
            <Card title="中间件Top5">
              <div className="main zhu"></div>
            </Card>
          </div>
        </div>
      ),
      设备管理: (
        <div>
          <div className="fuwuqi-bottom">
            <div className="fuwuqi-list">
              <Tree
                defaultExpandedKeys={["0-0-0", "0-0-1"]}
                defaultSelectedKeys={["0-0-0", "0-0-1"]}
                defaultCheckedKeys={["0-0-0", "0-0-1"]}
                onSelect={this.onSelect}
                onCheck={this.onCheck}
              >
                <TreeNode title="服务器设备" key="1-1">
                  <TreeNode title="路由器" key="2-1-0" />
                </TreeNode>
                <TreeNode title="网络设备" key="2-2">
                  <TreeNode title="路由器" key="2-2-0" />
                  <TreeNode title="交换机" key="2-2-1" />
                  <TreeNode title="负载均衡" key="2-2-2" />
                  <TreeNode title="防火墙" key="2-2-3" />
                </TreeNode>
                <TreeNode title="数据存储设备" key="3-3">
                  <TreeNode title="边缘存储设备" key="3-3-0" />
                  <TreeNode title="网络存储设备" key="3-3-1" />
                </TreeNode>
                <TreeNode title="操作系统" key="4-4">
                  <TreeNode title="VxWorks" key="4-4-3" />
                  <TreeNode title="FreeRTOS" key="4-4-2" />
                  <TreeNode title="嵌入式Linux" key="4-4-0" />
                  <TreeNode title="WinCE" key="4-4-1" />
                  <TreeNode title="其他" key="4-4-5" />
                </TreeNode>
              </Tree>
            </div>
            <div className="fuwuqi-right">
              {/* 搜索框以及按钮 */}
              <div id="components-dropdown-demo-dropdown-button">
                <div>
                  <Dropdown overlay={menu}>
                    <Button>
                      自动识别 <Icon type="down" />
                    </Button>
                  </Dropdown>
                  <Input placeholder="关键字" style={{ width: 400 }} />
                  <Button type="primary">搜索</Button>
                </div>
                <div>
                  <Button
                    type="primary"
                    onClick={() => this.setState({ isShowAdd: true })}
                  >
                    新增资产
                  </Button>
                  <Button>同步最新资产</Button>
                  <Button>
                    <Icon type="sync" spin />
                  </Button>
                  <Button>
                    <Icon type="download" />
                  </Button>
                </div>
              </div>
              {/* 下侧表单 */}
              <Table
                columns={columns}
                dataSource={data}
                style={{ marginTop: 5 }}
              />
            </div>
          </div>
        </div>
      ),
      拓扑: <div></div>,
    };
    return (
      <div>
        <Card
          style={{ width: "100%" }}
          tabList={tabListNoTitle}
          activeTabKey={this.state.noTitleKey}
          onTabChange={(key) => {
            this.onTabChange(key, "noTitleKey");
          }}
        >
          {contentListNoTitle[this.state.noTitleKey]}
        </Card>
        <Modal
          title="新增资产"
          visible={this.state.isShowAdd}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          className="addzican-modal"
        >
          <Addzican />
        </Modal>
        <Modal
          title=" "
          visible={this.state.show}
          onOk={this.handleOk1}
          onCancel={this.handleCancel1}
          style={{ textAlign: "center" }}
          cancelText="取消"
          okText="确认"
        >
          <span>移除组织 : </span>{" "}
          <Input style={{ width: 200 }} value="中科源" />
        </Modal>
      </div>
    );
  }
}
export default assetsmanagement;
